<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:a4j="http://richfaces.org/a4j">

<h:head>
  <title></title>
</h:head>
<body>
  <ui:composition template="/templates/template.xhtml">

    <ui:define name="windowTitle">Quran Translation Tools</ui:define>

    <ui:define name="content">
      <h:form  prependId="false">
        
        <h:panelGrid columns="5">
          
          <h:outputText value="Chapter" styleClass="labelBold"/>
          <h:outputText value="Verse" styleClass="labelBold"/>
          <h:inputHidden id="serial" value="#{bean.serial}"/>
          <h:outputText value=""/>
          <h:outputText value=""/>
          
          <h:inputText id="chapter" size="3" value="#{bean.chapter}" required="true"/>
          <h:inputText id="verse" size="3" value="#{bean.verse}" required="true"/>
          <h:commandButton value="Go">
            <f:ajax event="click" 
                    listener="#{bean.lookupVerse}" 
                    execute="serial chapter verse"
                    render="qAndTrans serial chapter verse"/>
          </h:commandButton>
          <h:commandButton value="Previous">
            <f:ajax event="click" 
                    listener="#{bean.lookupPereviousVerse}" 
                    execute="serial chapter verse"
                    render="qAndTrans serial chapter verse"/>
          </h:commandButton>
          <h:commandButton value="Next">
            <f:ajax event="click" 
                    listener="#{bean.lookupNextVerse}" 
                    execute="serial chapter verse"
                    render="qAndTrans serial chapter verse"/>
          </h:commandButton>
          
          
        </h:panelGrid>
        
        <hr/>
        
        <h:panelGrid id="qAndTrans">
            
          <h:inputTextarea cols="90" rows="3" value="#{bean.combo.quranVerse}" 
                           class="quran textArea" dir="rtl" readonly="true" />

          <ui:repeat value="#{bean.combo.transList}" var="trans">

            <h:inputTextarea cols="105" rows="2" value="#{trans}" 
                           class="trans textArea" dir="rtl" readonly="false" />
          </ui:repeat>
          
        </h:panelGrid>
        
        
        
        
<!--        <h:outputLabel value="Name:" for="nameInput" />
        <h:inputText id="nameInput" value="#{richBean.name}">
          <a4j:ajax event="keyup" render="output" />
        </h:inputText>
        <h:panelGroup id="output">
          <h:outputText value="Hello #{richBean.name}!"
                        rendered="#{not empty richBean.name}" />
        </h:panelGroup>-->

      </h:form>
    </ui:define>
  </ui:composition>
</body>
</html>
